<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .grid {
      margin: auto;
      width: 530px;
      text-align: center;
    }

    .grid table {
      border-top: 1px solid #C2D89A;
      width: 100%;
      border-collapse: collapse;
    }

    .grid th,
    td {
      padding: 10;
      border: 1px dashed #F3DCAB;
      height: 35px;
      line-height: 35px;
    }

    .grid th {
      background-color: #F3DCAB;
    }

    .grid .book {
      padding-bottom: 10px;
      padding-top: 5px;
      background-color: #F3DCAB;
    }

    .grid .total {
      height: 30px;
      line-height: 30px;
      background-color: #F3DCAB;
      border-top: 1px solid #C2D89A;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="grid">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id">
              编号：
            </label>
            <input v-focus type="text" id="id" v-model='id' :disabled='isFlag' />
            <!-- 获取图书id信息 -->
            <label for="name">
              名称：
            </label>
            <input type="text" id="name" v-model='name' />
            <!-- 获取图书信息 -->
            <button @click='handle' :disabled='subimtFlag'>提交</button>
          </div>
        </div>
      </div>
      <div class="total">
        <span>图书总数：</span>
        <span>{{total}}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for='item in books' :key='item.id'>
            <!-- 遍历数据，获取内容 -->
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
            <td>
              <a href="" @click.prevent='xiugai(item.id)'>修改</a>
              <!-- 阻止a 标签默认行为 -->
              <span>|</span>
              <a href="" @click.prevent @click='delBooks(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 获取时间 过滤器
    // Vue.filter('format', function (value, age) {
    //   function dateFormat(date, format) {
    //     if (typeof date === "string") {
    //       var mts = date.match(/(\/Date\((\d+)\)\/)/);
    //       if (mts && mts.length >= 3) {
    //         date = parseInt(mts[2]);
    //       }
    //     }
    //     date = new Date(date);
    //     if (!date || date.toUTCString() == "Invalid Date") {
    //       return "";
    //     }
    //     var map = {
    //       "M": date.getMonth() + 1, //月份 
    //       "d": date.getDate(), //日 
    //       "h": date.getHours(), //小时 
    //       "m": date.getMinutes(), //分 
    //       "s": date.getSeconds(), //秒 
    //       "q": Math.floor((date.getMonth() + 3) / 3), //季度 
    //       "S": date.getMilliseconds() //毫秒 
    //     };

    //     format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
    //       var v = map[t];
    //       if (v !== undefined) {
    //         if (all.length > 1) {
    //           v = '0' + v;
    //           v = v.substr(v.length - 2);
    //         }
    //         return v;
    //       } else if (t === 'y') {
    //         return (date.getFullYear() + '').substr(4 - all.length);
    //       }
    //       return all;
    //     });
    //     return format;
    //   }
    //   return dateFormat(value, age)
    // })


    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        isFlag: false,
        books: []
      },
      created() {
        const data = [{
          id: 1,
          name: '三国演义',
          date: ''
        }, {
          id: 2,
          name: '水浒传',
          date: ''
        }, {
          id: 3,
          name: '红楼梦',
          date: ''
        }, {
          id: 4,
          name: '西游记',
          date: ''
        }]
        this.books = data
      },
      methods: {
        handle() {
          if (this.isFlag) {
            this.books.some(item => {
              if (item.id === this.id) {
                return item.id === this.id
              }
              this.isFlag = false
            })
          } else {
            // 添加
            let add = {
              id: this.id,
              name: this.name,
              date: ''
            }
            this.books.push(add)
          }
          this.id = this.name = ''
        },

        // 修改
        xiugai(id) {
          this.isFlag = true
          const book = this.books.filter(item => {
            return item.id === id
          })
          this.id = book[0].id
          this.name = book[0].name
        },
        delBooks(id) {
          const index = this.books.findIndex(item => {
            return item.id === id
          })
          this.books.splice(index, 1)
        }
      }
    })
  </script>
</body>

</html>